<template>
  <div class="fullMain">
    <x-header :left-options="{backText: '',showBack: false}" >
      罚款提交
    </x-header>
    <div v-transfer-dom>
      <alert v-model="isShowAlert" :content="alertText"></alert>
    </div>
    <div style="height:20px"/>
    <load-more v-if="isShowLoadMore" :tip="tipOfPayLoading"></load-more>
    <div class="mainbBg" style="margin-top:40%" v-else>
      <div class="saveDiv">
        <div style="text-align:center; margin-bottom:20px">
          <span style="font-size:17px">您昨日未填写汇报，须缴纳罚款 {{fineMoney}}元</span>
        </div>
        <button type="button" class="affirmBtn specialBtn mB" @click="payFine">
          <i class="fa fa-check"></i>
          <span>点击缴纳</span>
        </button>
        <!-- <button type="button" class="affirmBtn specialBtn mB" @click="reject">
          <i class="fa fa-times" style="color:red"></i>
          <span style="color:red">日后再说</span>
        </button> -->
      </div>
    </div>
  </div>
</template>
<script>
import {XHeader, LoadMore} from 'vux'
import group from 'api/group'
import user from 'api/user'
import wx from 'api/wx'
import common from 'utilMethods/common.js'
export default {
  name: 'U_pay_a_fine',
  data() {
    return {
      paramsInUrl: {},
      openid: '',
      alertText: '', // 验证提示框的文本
      isShowAlert: false, // 是否显示验证提示框
      tipOfPayLoading: '支付处理中，请耐心等待...',
      isShowLoadMore: false,

      fineMoney: '0',
      groupId: 0,
      time: '',
    }
  },
  components: {
    XHeader,
    LoadMore,
  },
  mounted() {
    this.getParamsFromUrl();
  },
  methods: {
    back () {
      WeixinJSBridge.call("closeWindow")
    },
    showAlert (alertText){
      this.isShowAlert = true
      this.alertText = alertText
    },
    closeTip (){
      this.isShowAlert = false
      this.alertText = ''
    },
    getParamsFromUrl () {
      let url = window.location.href;
      this.openid = common.getValFromUrl(url, 'openid');
      this.groupId = common.getValFromUrl(url, 'groupId');
      this.time = common.getValFromUrl(url, 'time');
      this.fineMoney = common.getValFromUrl(url, 'fineMoney');
    },
    async payFine () {
      this.isShowLoadMore = true;
      let paramsOfCreate = {
        openId: this.openid,
        groupId: this.groupId,
        time: this.time,
        tradeNo: common.randomString(),
        
      };
      console.log('paramsOfCreate')
      console.log(paramsOfCreate)
      const paramsOfPay = await wx.postCreateOrder(paramsOfCreate)
      console.log(paramsOfPay)
      this.onBridgeReady(paramsOfPay)
    },
    onBridgeReady (params) {
      let that = this;
      let paramsNeeded = {};
      paramsNeeded['appId'] = params.appId;
      paramsNeeded['timeStamp'] = params.timeStamp;
      paramsNeeded['nonceStr'] = params.nonceStr;
      paramsNeeded['package'] = params.packageValue;
      paramsNeeded['signType'] = params.signType;
      paramsNeeded['paySign'] = params.paySign;
      console.log('paramsNeeded type')
      console.log(typeof(paramsNeeded))
      console.log(paramsNeeded)
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', 
        paramsNeeded,
        // {
        //   "appId": params.appId,
        //   "timeStamp": params.timeStamp,
        //   "nonceStr": params.nonceStr,
        //   "package": params.packageValue,
        //   "signType": params.signType,
        //   "paySign": params.paySign
        // },
        function(res) {
          that.isShowLoadMore = false;
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            that.showAlert('付款成功');
            setTimeout(() => {
              WeixinJSBridge.call('closeWindow');
            }, 2000)
          } else {
            that.showAlert("支付失败：" + res.err_msg);
          }
        }
      )
    },
  },
}
</script>
